
typedef struct
{
    lv_obj_t* cont;
    lv_obj_t* icon;
    lv_obj_t* labelInfo;
    lv_obj_t* labelData;
} item_t;
struct
{
    lv_style_t icon;
    lv_style_t focus;
    lv_style_t info;
    lv_style_t data;
} style;
struct
{
    item_t sport;
    item_t battery;
    item_t storage;
    item_t system;
    lv_obj_t* root;
    lv_group_t* group;
} main_page;

/*******************************************************************/
/*******************************************************************/
static void gui_status_bar_handler1(lv_event_t* e){ lv_group_focus_next(main_page.group);}
static void gui_status_bar_handler2(lv_event_t* e){ lv_group_focus_prev(main_page.group);}
/*******************************************************************/
void gui_status_bar()
{
    lv_obj_t* cont = lv_obj_create(lv_layer_top());
    lv_obj_remove_style_all(cont);
    lv_obj_set_size(cont, LV_HOR_RES, 30);
    lv_obj_set_style_bg_opa(cont, LV_OPA_TRANSP, LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(cont, lv_color_hex(0x333333), LV_STATE_DEFAULT);
    //---------------------------------------------------------
    lv_obj_t* btn = lv_btn_create(cont);
    lv_obj_set_style_bg_opa(btn, LV_OPA_TRANSP, LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(btn, lv_color_hex(0x333333), LV_STATE_DEFAULT);
    lv_obj_add_event_cb(btn, gui_status_bar_handler1, LV_EVENT_CLICKED, NULL);
    lv_obj_align(btn, LV_ALIGN_LEFT_MID, 30, 0);
    lv_obj_t* label = lv_label_create(btn);
    lv_label_set_text(label, LV_SYMBOL_UP);
    lv_obj_center(label);
    //---------------------------------------------------------
    btn = lv_btn_create(cont);
    lv_obj_set_style_bg_opa(btn, LV_OPA_TRANSP, LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(btn, lv_color_hex(0x333333), LV_STATE_DEFAULT);
    lv_obj_add_event_cb(btn, gui_status_bar_handler2, LV_EVENT_CLICKED, NULL);
    lv_obj_align(btn, LV_ALIGN_RIGHT_MID, -30, 0);
    label = lv_label_create(btn);
    lv_label_set_text(label, LV_SYMBOL_DOWN);
    lv_obj_center(label);
}

/*******************************************************************/
/*******************************************************************/
void gui_main_style()
{
    //---------------------------------------------------------
    lv_style_init(&style.icon);
    lv_style_set_width(&style.icon, 220);
    lv_style_set_bg_color(&style.icon, lv_color_black());
    lv_style_set_bg_opa(&style.icon, LV_OPA_COVER);
    lv_style_set_text_font(&style.icon, &lv_font_montserrat_16);
    lv_style_set_text_color(&style.icon, lv_color_white());
    //---------------------------------------------------------
    lv_style_init(&style.focus);
    lv_style_set_width(&style.focus, 70);
    lv_style_set_border_side(&style.focus, LV_BORDER_SIDE_RIGHT);
    lv_style_set_border_width(&style.focus, 2);
    lv_style_set_border_color(&style.focus, lv_color_hex(0xff931e));
    //---------------------------------------------------------
    static const lv_style_prop_t style_prop[] = { LV_STYLE_WIDTH, LV_STYLE_PROP_INV };
    static lv_style_transition_dsc_t trans;
    lv_style_transition_dsc_init(&trans, style_prop, lv_anim_path_overshoot, 200, 0, NULL);
    lv_style_set_transition(&style.focus, &trans);
    lv_style_set_transition(&style.icon, &trans);
    //---------------------------------------------------------
    lv_style_init(&style.info);
    lv_style_set_text_font(&style.info, &lv_font_montserrat_12);
    lv_style_set_text_color(&style.info, lv_color_hex(0x999999));
    //---------------------------------------------------------
    lv_style_init(&style.data);
    lv_style_set_text_font(&style.data, &lv_font_montserrat_12);
    lv_style_set_text_color(&style.data, lv_color_white());
}

/*******************************************************************/
/*******************************************************************/
void gui_main_item(item_t* item, lv_obj_t* root, lv_img_dsc_t * img_ptr
    const char* name, const char* info)
{
    lv_obj_t* cont = lv_obj_create(root);
    lv_obj_remove_style_all(cont);
    lv_obj_set_width(cont, 220);
    lv_obj_clear_flag(cont, LV_OBJ_FLAG_SCROLLABLE);
    item->cont = cont;
    //---------------------------------------------------------
    lv_obj_t* icon = lv_obj_create(cont);
    lv_obj_remove_style_all(icon);
    lv_obj_clear_flag(icon, LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_add_style(icon, &style.icon, 0);
    lv_obj_add_style(icon, &style.focus, LV_STATE_FOCUSED);
    lv_obj_set_style_align(icon, LV_ALIGN_LEFT_MID, 0);
    lv_obj_set_flex_flow(icon, LV_FLEX_FLOW_COLUMN);
    lv_obj_set_flex_align(icon, LV_FLEX_ALIGN_SPACE_AROUND,
        LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
    lv_obj_t* img = lv_img_create(icon);
    //LV_IMG_DECLARE(img_lv_demo_music_cover_1);
    lv_img_set_src(img, img_ptr); //????
    item->icon = icon;
    //---------------------------------------------------------
    lv_obj_t* label = lv_label_create(icon);
    lv_label_set_text(label, name);
    label = lv_label_create(cont);
    lv_label_set_text(label, info);
    lv_obj_add_style(label, &style.info, 0);
    lv_obj_align(label, LV_ALIGN_LEFT_MID, 75, 0);
    item->labelInfo = label;
    //---------------------------------------------------------
    label = lv_label_create(cont);
    lv_label_set_text(label, "-");
    lv_obj_add_style(label, &style.data, 0);
    lv_obj_align(label, LV_ALIGN_CENTER, 60, 0);
    item->labelData = label;
    //---------------------------------------------------------
    lv_obj_move_foreground(icon);
    lv_obj_update_layout(item->labelInfo);
    lv_coord_t height = lv_obj_get_height(item->labelInfo);
    height = LV_MAX(height, 100);
    lv_obj_set_height(cont, height);
    lv_obj_set_height(icon, height);
}

/*******************************************************************/
/*******************************************************************/
void gui_main_focus(lv_group_t* g)
{
    lv_obj_t* icon = lv_group_get_focused(g);
    lv_obj_t* cont = lv_obj_get_parent(icon);
    lv_coord_t y = lv_obj_get_y(cont);
    lv_obj_scroll_to_y(lv_obj_get_parent(cont), y, LV_ANIM_ON);
}

/*******************************************************************/
/*******************************************************************/
/*******************************************************************/
static lv_coord_t main_page_y;
void gui_main_page()
{
    gui_main_style();
    gui_status_bar();
    //---------------------------------------------------------
    lv_obj_t* root = lv_obj_create(lv_scr_act());
    lv_obj_remove_style_all(root);
    lv_obj_set_size(root, LV_HOR_RES, LV_VER_RES);
    lv_obj_set_style_bg_color(root, lv_color_black(), 0);
    lv_obj_set_style_bg_opa(root, LV_OPA_COVER, 0);
    lv_obj_set_style_pad_ver(root, ((LV_VER_RES - 100) / 2), 0);
    lv_obj_set_flex_flow(root, LV_FLEX_FLOW_COLUMN);
    lv_obj_set_flex_align(root, LV_FLEX_ALIGN_START,
        LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);
    //---------------------------------------------------------
    LV_IMG_DECLARE(img_src_##name);
    lv_img_dsc_t * img_ptr = &img_src_##name;
    gui_main_item(&main_page.sport, root, img_ptr, "Sport", "Total trip\nTotal time\nMax speed");
    gui_main_item(&main_page.battery, root, img_ptr, "Battery", "Usage\nVoltage\nStatus");
    gui_main_item(&main_page.storage, root, img_ptr, "Storage", "Detect\nSize\nVersion");
    gui_main_item(&main_page.system, root, img_ptr, "System", "Firmware\nAuthor\nLVGL\nSysTick\nCompiler\n\nBuild");
    //---------------------------------------------------------
    main_page_y = LV_VER_RES + lv_obj_get_scroll_y(root);
    lv_obj_scroll_by(root, 0, main_page_y, LV_ANIM_OFF);
    lv_obj_fade_in(root, 300, 0);
    main_page.root = root;
    //---------------------------------------------------------
    main_page.group = lv_group_create();
    lv_group_set_focus_cb(main_page.group, gui_main_focus);
    lv_group_add_obj(main_page.group, main_page.sport.icon);
    lv_group_add_obj(main_page.group, main_page.battery.icon);
    lv_group_add_obj(main_page.group, main_page.storage.icon);
    lv_group_add_obj(main_page.group, main_page.system.icon);
    lv_group_focus_obj(main_page.sport.icon);
}

/*******************************************************************/
/*******************************************************************/
void gui_startup_timer(lv_timer_t* timer) { gui_main_page(); }
/*******************************************************************/
void gui_startup_page()
{
    lv_obj_t* root = lv_obj_create(lv_scr_act());
    lv_obj_remove_style_all(root);
    lv_obj_set_size(root, LV_HOR_RES, LV_VER_RES);
    lv_obj_clear_flag(root, LV_OBJ_FLAG_SCROLLABLE);
    //----------------------------------------------------
    lv_obj_t* cont = lv_obj_create(root);
    lv_obj_remove_style_all(cont);
    lv_obj_set_size(cont, 110, 50);
    lv_obj_set_style_border_color(cont, lv_color_hex(0xff931e), 0);
    lv_obj_set_style_border_side(cont, LV_BORDER_SIDE_BOTTOM, 0);
    lv_obj_set_style_border_width(cont, 3, 0);
    lv_obj_set_style_border_post(cont, true, 0);
    lv_obj_center(cont);
    //----------------------------------------------------
    lv_obj_t* label = lv_label_create(cont);
    lv_obj_set_style_text_font(label, &lv_font_montserrat_36, 0);
    lv_obj_set_style_text_color(label, lv_color_hex(0xff931e), 0);
    lv_label_set_text(label, "Hello World!");
    lv_obj_center(label);
    //----------------------------------------------------
    lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_early_apply(&a, true);
    lv_anim_set_path_cb(&a, lv_anim_path_ease_out);
    //----------------------------------------------------
    lv_anim_set_time(&a, 500);
    lv_anim_set_delay(&a, 0);
    lv_anim_set_var(&a, cont);
    lv_anim_set_values(&a, 0, lv_obj_get_style_width(cont, 0));
    lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t)lv_obj_set_width);
    lv_anim_start(&a);
    //----------------------------------------------------
    lv_anim_set_delay(&a, 500);
    lv_anim_set_var(&a, label);
    lv_anim_set_values(&a, lv_obj_get_style_height(cont, 0), lv_obj_get_y(label));
    lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t)lv_obj_set_y);
    lv_anim_start(&a);
    //----------------------------------------------------
    lv_timer_t* timer = lv_timer_create(gui_startup_timer, 2000, NULL);
    lv_timer_set_repeat_count(timer, 1);
}
